<template>
	<view class="container">
		<view class="filter-bar">
			<text style="font-size: 28rpx;"> 共{{repairs.length}}条 </text>
			<picker mode="date" @change="onDateChange">
				<view class="filter-item">
					<text class="filter-label">日期：</text>
					<text class="filter-value">{{ selectedDate }}</text>
				</view>
			</picker>
		</view>

		<view style="display: flex;align-items: center;justify-content: space-between;">


			<picker mode="selector" :range="statusOptions" @change="onStatusChange">
				<view class="filter-item">
					<text class="filter-label">状态：</text>
					<text class="filter-value">{{ selectedStatus }}</text>
				</view>
			</picker>
			<picker mode="selector" :range="statusOptions" @change="onStatusChange">
				<view class="filter-item">
					<text class="filter-label">维修方式：</text>
					<text class="filter-value">{{ selectedStatus }}</text>
				</view>
			</picker>
		</view>
		<view class="repair-list">
			<view class="repair-item" v-for="(repair, index) in repairs" :key="index">
				<view class="repair-info">
					<view class="repair-label">维修单号： <text class="repair-value">{{ repair.id }}</text></view>

					<view class="repair-label">维修方式： <text class="repair-value">{{ repair.type }}</text></view>
					<view class="repair-label">预约日期：<text class="repair-value">{{ repair.appointmentTime }}</text>
					</view>
				</view>


				<view class="repair-info">
					<view class="repair-status" :style="{ color: repair.statusColor }">
						{{ repair.status }}
					</view>
					<button class="detail-button" @click="onViewDetails(repair.id)">查看详情</button>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	const statusOptions = ref(["进行中", "已完成"]);
	const selectedStatus = ref("进行中");
	const selectedDate = ref("2022-10-10");

	const repairs = ref([{
			id: "3535252",
			type: "到店维修",
			appointmentTime: "2022-10-11 11:00",
			status: "进行中",
			statusColor: "#007aff",
		},
		{
			id: "3535252",
			type: "上门取车",
			appointmentTime: "2022-10-11 11:00",
			status: "已完成",
			statusColor: "#999999",
		},
		{
			id: "3535252",
			type: "上门取车",
			appointmentTime: "2022-10-11 11:00",
			status: "进行中",
			statusColor: "#007aff",
		},
	]);

	const onStatusChange = (e) => {
		selectedStatus.value = statusOptions.value[e.detail.value];
	};

	const onDateChange = (e) => {
		selectedDate.value = e.detail.value;
	};

	const onViewDetails = (id) => {
		// uni.showToast({
		// 	title: `查看详情：维修单号 ${id}`,
		// 	icon: "none",
		// });
		uni.navigateTo({
			url: '/pages/index/taskManagement/details/details?id=' + id,
		});
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: white;
	}

	.filter-bar {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		font-weight: 550;
		padding-left: 20rpx;
	}

	.filter-item {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		font-weight: 550;
	}

	.filter-label {
		font-size: 28rpx;
		color: #333333;
		margin-right: 10rpx;

	}

	.filter-value {
		font-size: 28rpx;
		color: #666666;

	}

	.repair-list {
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.repair-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding-bottom: 6rpx;
		box-shadow: 0 2rpx rgba(0, 0, 0, 0.2);
	}

	.repair-info {
		margin-bottom: 10rpx;
	}

	.repair-label {
		font-size: 28rpx;
		color: #333333;
		margin-right: 10rpx;
		margin-bottom: 20rpx;
	}

	.repair-value {
		font-size: 28rpx;
		color: #666666;

	}

	.repair-status {
		padding-bottom: 50rpx;
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.detail-button {
		width: 180rpx;
		height: 60rpx;
		background-color: #007aff;
		color: #ffffff;
		font-size: 28rpx;
		border: none;
		outline: none;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
	}
</style>